<button class="btn btn-primary" (click)="service.goBack()">&larr; Back</button>
<br>
<br>
 
<div *ngIf="(service.teamDetails$ | async) as teamDetails">
  <p class="h2 text-center">{{ teamDetails.name }}</p>
  <br>

  <div class="row team-details">
    <div class="col-sm-4">
      <p class="h4 text-center text-muted">Team Details</p>
      <table class="table table-striped table-condensed">
        <tbody>
          <tr>
            <td class="text-right col-xs-6">ID:</td>
            <td class="text-left col-xs-6"><strong>{{ teamDetails.arenaTeamId }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Type:</td>
            <td class="text-primary text-left col-xs-6"><strong>{{ teamDetails.type }}v{{ teamDetails.type }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Rank:</td>
            <td class="text-warning text-left col-xs-6"><strong>{{ teamDetails.rank }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Rating:</td>
            <td class="text-yellow text-left col-xs-6"><strong>{{ teamDetails.rating }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Captain:</td>
            <td class="text-left col-xs-6" [ngClass]="teamDetails.faction"><strong>{{ teamDetails.captainName }}</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-sm-4">
      <p class="h4 text-center text-muted">Season Games</p>
      <table class="table table-striped table-condensed">
        <tbody>
          <tr>
            <td class="text-right col-xs-6">Games:</td>
            <td class="text-primary text-left col-xs-6"><strong>{{ teamDetails.seasonGames }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Won:</td>
            <td class="text-success text-left col-xs-6"><strong>{{ teamDetails.seasonWins }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Lost:</td>
            <td class="text-danger text-left col-xs-6"><strong>{{ teamDetails.seasonLosses }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Won%:</td>
            <td class="text-success text-left col-xs-6"><strong>{{ (teamDetails.seasonGames == 0 ? 0 : teamDetails.seasonWins / teamDetails.seasonGames * 100) }}%</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Lost%:</td>
            <td class="text-danger text-left col-xs-6"><strong>{{ (teamDetails.seasonGames == 0 ? 0 : teamDetails.seasonLosses / teamDetails.seasonGames * 100) }}%</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-sm-4">
      <p class="h4 text-center text-muted">Week Games</p>
      <table class="table table-striped table-condensed">
        <tbody>
          <tr>
            <td class="text-right col-xs-6">Games:</td>
            <td class="text-primary text-left col-xs-6"><strong>{{ teamDetails.weekGames }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Won:</td>
            <td class="text-success text-left col-xs-6"><strong>{{ teamDetails.weekWins }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Lost:</td>
            <td class="text-danger text-left col-xs-6"><strong>{{ teamDetails.weekLosses }}</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Won%:</td>
            <td class="text-success text-left col-xs-6"><strong>{{ teamDetails.weekGames == 0 ? 0 : teamDetails.weekWins / teamDetails.weekGames * 100 }}%</strong></td>
          </tr>
          <tr>
            <td class="text-right col-xs-6">Lost%:</td>
            <td class="text-danger text-left col-xs-6"><strong>{{ teamDetails.weekGames == 0 ? 0 : teamDetails.weekLosses / teamDetails.weekGames * 100 }}%</strong></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="table-responsive">
        <p class="h4 text-center text-muted">Team Members</p>
        <table class="table table-striped table-bordered">
        <thead>
          <th class="text-center">Name</th>
          <th class="text-center">&nbsp; &#9679;</th>
          <th class="text-center">Personal Rating</th>
          <th class="text-center">MM Rating</th>
          <th class="text-center">Season Games</th>
          <th class="text-center">Season Won</th>
          <th class="text-center">Season Lost</th>
          <th class="text-center">Week Games</th>
          <th class="text-center">Week Won</th>
          <th class="text-center">Week Lost</th>
          <th class="text-center">Week Needed</th>
        </thead>
        <tbody>
          <tr *ngFor="let member of service.members$ | async">
            <td [ngClass]="member.faction"><strong>{{ member.name }}</strong></td>
            <td><strong><img [src]="'assets/class/' + member.class + '.gif'"> <img [src]="'assets/race/' + member.race + '-' + member.gender + '.gif'"></strong></td>
            <td class="text-yellow">  <strong>{{ member.personalRating   }}</strong></td>
            <td class="text-warning"> <strong>{{ member.matchmakerRating }}</strong></td>
            <td class="text-primary"> <strong>{{ member.seasonGames      }}</strong></td>
            <td class="text-success"> <strong>{{ member.seasonWins       }}</strong> &nbsp; ({{ member.seasonGames == 0 ? 0 : member.seasonWins / member.seasonGames * 100 }}%)</td>
            <td class="text-danger">  <strong>{{ member.seasonLosses     }}</strong> &nbsp; ({{ member.seasonGames == 0 ? 0 : member.seasonLosses / member.seasonGames * 100 }}%)</td>
            <td class="text-primary"> <strong>{{ member.weekGames        }}</strong></td>
            <td class="text-success"> <strong>{{ member.weekWins         }}</strong> &nbsp; ({{ member.weekGames == 0 ? 0 : member.weekWins / member.weekGames * 100 }}%)</td>
            <td class="text-danger">  <strong>{{ member.weekLosses       }}</strong> &nbsp; ({{ member.weekGames == 0 ? 0 : member.weekLosses / member.weekGames * 100 }}%)</td>
            <td class="text-info">    <strong>{{ member.weekNeeded       }}</strong></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>
